<template>
  <div class="no-exam-list">
    <StudentNavbar title="未参加的考试" />
    
    <!-- 搜索条件 -->
    <el-card class="search-card">
      <template #header>
        <div class="card-header">
          <span>搜索条件</span>
        </div>
      </template>
      <el-form :model="searchForm" label-width="100px" inline>
        <el-form-item label="科目名称">
          <el-input v-model="searchForm.subjectName" placeholder="请输入科目名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchExams" icon="el-icon-search">搜索</el-button>
          <el-button @click="resetSearch" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 数据统计 -->
    <el-card class="stats-card">
      <template #header>
        <div class="card-header">
          <span>考试概览</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-icon bg-primary">
              <i class="el-icon-document"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ examList.length }}</div>
              <div class="stat-label">可参加考试</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-icon bg-success">
              <i class="el-icon-stopwatch"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ totalChoiceQuestions }}</div>
              <div class="stat-label">选择题总数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-icon bg-warning">
              <i class="el-icon-timer"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ averageTimeLimit }}</div>
              <div class="stat-label">平均时长(分钟)</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 考试列表 -->
    <el-card class="exams-card">
      <template #header>
        <div class="card-header">
          <span>可参加考试</span>
          <span class="exam-count">共 {{ examList.length }} 场考试</span>
        </div>
      </template>
      
      <div v-if="examList.length === 0 && !loading" class="empty-state">
        <el-empty description="暂无未参加的考试"></el-empty>
      </div>
      
      <div v-else class="exams-grid">
        <div 
          class="exam-card" 
          v-for="exam in examList" 
          :key="exam.subjectId"
        >
          <div class="exam-header">
            <h3 class="subject-name">{{ exam.subjectName }}</h3>
            <el-tag type="primary" effect="dark">{{ exam.timeLimit }}分钟</el-tag>
          </div>
          
          <div class="exam-details">
            <div class="detail-section">
              <h4>题型分布</h4>
              <ul class="question-types">
                <li>
                  <span class="question-type">选择题</span>
                  <span class="question-count">{{ exam.choiceQuestionCount }}题</span>
                  <span class="question-score">{{ exam.choiceQuestionScore }}分/题</span>
                </li>
                <li>
                  <span class="question-type">判断题</span>
                  <span class="question-count">{{ exam.judgmentQuestionCount }}题</span>
                  <span class="question-score">{{ exam.judgmentQuestionScore }}分/题</span>
                </li>
                <li>
                  <span class="question-type">填空题</span>
                  <span class="question-count">{{ exam.fillQuestionCount }}题</span>
                  <span class="question-score">{{ exam.fillQuestionScore }}分/题</span>
                </li>
              </ul>
            </div>
            
            <div class="detail-section">
              <h4>考试总分</h4>
              <div class="total-score">
                {{ calculateTotalScore(exam) }} 分
              </div>
            </div>
          </div>
          
          <div class="exam-footer">
            <el-button 
              type="primary" 
              round 
              @click="takeExam(exam.subjectId)"
              icon="el-icon-edit-outline">
              参加考试
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 加载状态 -->
      <div class="loading-container" v-if="loading">
        <i class="el-icon-loading"></i>
        <span>加载中...</span>
      </div>
    </el-card>
  </div>
</template>

<script>
import StudentAPI from '@/api/student'
import StudentNavbar from '@/components/StudentNavbar.vue'

export default {
  name: 'NoExamList',
  components: {
    StudentNavbar
  },
  data() {
    return {
      searchForm: {
        subjectName: ''
      },
      examList: [],
      loading: false
    }
  },
  computed: {
    // 计算选择题总数
    totalChoiceQuestions() {
      return this.examList.reduce((total, exam) => total + exam.choiceQuestionCount, 0);
    },
    
    // 计算平均考试时长
    averageTimeLimit() {
      if (this.examList.length === 0) return 0;
      const total = this.examList.reduce((sum, exam) => sum + exam.timeLimit, 0);
      return Math.round(total / this.examList.length);
    }
  },
  created() {
    this.fetchNoExamList()
  },
  methods: {
    // 计算考试总分
    calculateTotalScore(exam) {
      return exam.choiceQuestionCount * exam.choiceQuestionScore +
             exam.judgmentQuestionCount * exam.judgmentQuestionScore +
             exam.fillQuestionCount * exam.fillQuestionScore;
    },
    
    // 获取未参加的考试列表
    async fetchNoExamList() {
      this.loading = true
      try {
        const res = await StudentAPI.getNoExamList(this.searchForm.subjectName)
        if (res.data.code === 200 && res.data.msg === 'success') {
          this.examList = res.data.data || []
        } else {
          this.$message.error(res.data.message || '获取未参加考试列表失败')
        }
      } catch (error) {
        console.error('获取未参加考试列表失败:', error)
        this.$message.error('获取未参加考试列表失败: ' + (error.response?.data?.message || error.message))
      } finally {
        this.loading = false
      }
    },

    // 搜索考试
    searchExams() {
      this.fetchNoExamList()
    },

    // 重置搜索条件
    resetSearch() {
      this.searchForm.subjectName = ''
      this.fetchNoExamList()
    },

    // 参加考试
    async takeExam(subjectId) {
      // 直接调用takeExam接口参加考试
      try {
        const res = await StudentAPI.takeExam(subjectId);
        if (res.data.code === 200 && res.data.msg === 'success') {
          // 跳转到考试页面，传递科目ID
          this.$router.push(`/student/take-exam/${subjectId}`)
        } else {
          this.$message.error(res.data.message || '参加考试失败')
        }
      } catch (error) {
        console.error('参加考试失败:', error)
        this.$message.error('参加考试失败: ' + (error.response?.data?.message || error.message))
      }
    }
  }
}
</script>

<style scoped>
.no-exam-list {
  padding: 20px;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  min-height: calc(100vh - 40px);
}

.search-card, .stats-card, .exams-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 30px;
  color: white;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
}

.exam-count {
  font-size: 0.9rem;
  opacity: 0.8;
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
}

.bg-primary {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.bg-success {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.bg-warning {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

.exams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.exam-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.exam-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.subject-name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.exam-details {
  margin-bottom: 20px;
}

.detail-section {
  margin-bottom: 15px;
}

.detail-section h4 {
  margin: 0 0 10px 0;
  font-size: 1rem;
  color: #409eff;
}

.question-types {
  list-style: none;
  padding: 0;
  margin: 0;
}

.question-types li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.question-types li:last-child {
  border-bottom: none;
}

.question-type {
  flex: 1;
}

.question-count {
  width: 60px;
  text-align: center;
}

.question-score {
  width: 80px;
  text-align: right;
}

.total-score {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: #409eff;
  padding: 10px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 8px;
}

.exam-footer {
  display: flex;
  justify-content: center;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  color: white;
  font-size: 1.2rem;
}

.loading-container i {
  font-size: 2rem;
  margin-right: 10px;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.empty-state {
  padding: 40px 0;
}

@media (max-width: 768px) {
  .exams-grid {
    grid-template-columns: 1fr;
  }
  
  .exam-card {
    padding: 15px;
  }
  
  .exam-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .stat-item {
    padding: 15px;
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
}
</style>